<script setup lang="ts">
import dayjs from 'dayjs';
import { reactive, onMounted } from 'vue';
import { setClipboardData, showToast, showLoading, hideLoading } from '@tarojs/taro';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import {
  MEETING_LOCATION_LIST,
  INSERT_NO_PHONE,
} from '/@/api/modules/visitor/visitor-appointment-api';

const state = reactive<{
  /**
   * 访客邀约信息
   */
  appointmentInfo: AppSysVisitor.AppointmentDto;
  /**
   * 二维码地址
   */
  qrCodeUrl: string;
  /**
   * 访客邀请链接
   */
  realLink: string;
}>({
  appointmentInfo: {},
  qrCodeUrl: '',
  realLink: '',
});

onMounted(() => {
  showLoading();

  LOGIN_APP().then((loginInfoRes) => {
    MEETING_LOCATION_LIST({}).then((meetingLocationRes) => {
      if (!meetingLocationRes.content || !meetingLocationRes.content.length) {
        showToast({ title: '暂无会客地点!' });
        return;
      }

      INSERT_NO_PHONE({
        content: {
          applyDdUserId: loginInfoRes.sysUserDto.uaaUserId,
          meetingLocationId: meetingLocationRes.content[0].meetingLocationId,
          meetingLocationName: meetingLocationRes.content[0].meetingLocationName,
        },
      }).then((res) => {
        state.appointmentInfo = res.content;
        state.qrCodeUrl = res.qrCodeUrl;
        state.realLink = res.realLink;
        hideLoading();
      });
    });
  });
});
</script>

<template>
  <vide class="visitor-appointment-qrcode app-page--1">
    <app-navbar title="访客预约" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-appointment-qrcode__wrapper">
        <view class="visitor-appointment-qrcode__card">
          <view class="visitor-appointment-qrcode__card--header">
            <text>访客登记</text>
          </view>
          <view
            v-if="state.appointmentInfo.orgName"
            class="visitor-appointment-qrcode__card--header-2"
          >
            <text>- {{ state.appointmentInfo.orgName }} -</text>
          </view>
          <image
            class="visitor-appointment-qrcode__qrcode-img"
            v-if="state.qrCodeUrl"
            :src="state.qrCodeUrl"
          />
          <view
            v-if="state.appointmentInfo.expiredTime"
            class="visitor-appointment-qrcode__lifespan"
          >
            <text
              >有效时间至
              {{ dayjs(state.appointmentInfo.expiredTime).format('YYYY-MM-DD HH:mm') }}</text
            >
          </view>
        </view>
        <view class="visitor-appointment-qrcode__tip-1">
          <text>截取访客登记二维码分享给访客，填写访客信息</text>
        </view>
        <view class="visitor-appointment-qrcode__tip-2">
          <text>您也可复制登记地址直接发送给访客:</text>
        </view>
        <view v-if="state.realLink" class="visitor-appointment-qrcode__read-link">{{
          state.realLink || '-'
        }}</view>
        <view v-if="state.realLink" class="visitor-appointment-qrcode__copy-btn-wrapper">
          <nut-button
            class="visitor-appointment-qrcode__copy-btn"
            @click="
              setClipboardData({
                data: state.realLink,
                success: () => {
                  showToast({ title: '链接已复制!', icon: 'success' });
                },
              })
            "
          >
            复制链接
          </nut-button>
        </view>
      </view>
    </scroll-view>
  </vide>
</template>

<style lang="scss">
@import './index.scss';
</style>
